<template>
  <div class="usermanagement" @click="getbody">
    <div class="enquireabout">
      <div style="display:flex;width:85%;padding-left: 20px;">
        <div style="display:flex;align-items: center;width: 35%;">
          <p style="width:60px;font-size:14px;">姓名：</p>
          <el-input style="" size="" v-model="name" placeholder="请输入"></el-input>
        </div>
        <div style="display:flex;align-items: center;padding-left: 20px;margin-left: 20px;width: 35%;">
          <p style="width:60px;font-size:14px;">邮箱：</p>
          <el-input style="" size="" v-model="mailbox" placeholder="请输入"></el-input>
        </div>
      </div>
      <div style="flex:1;">
        <el-button @click="getreset">重置</el-button>
        <el-button type="primary" @click="getenquireabout">查询</el-button>
      </div>
    </div>
    <div class="Userlist">
      <div class="yhulieb">
        <span style="font-size:15px;">用户列表</span>
        <div class="cuoz">
          <div class="xinjian" @click="adduser">
            <span class="iconfont icon-jiahao"></span>
            新建
          </div>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <span @click="renovate" class="iconfont icon-shuaxin span1"></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="密度" placement="top">
            <span class="iconfont icon-loudou span2" @click="getdensity"></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="设置" placement="top">
            <span class="iconfont icon-shezhi span3"></span>
          </el-tooltip>
        </div>
      </div>
      <div class="main">
        <div class="Headinformation">
          <span style="flex:1">头像</span>
          <span style="flex:1">姓名</span>
          <span style="flex:2">邮箱</span>
          <span style="flex:1">是否禁用</span>
          <span style="flex:2">创建时间</span>
          <span style="flex:1">操作</span>

        </div>
        <div ref="density" class="userinfo" v-for="(item,index) in userlist" :key="item.id" v-show="length1!==0">
          <div class="img">
            <img :src="item.avatar_url" alt="">
          </div>
          <span class="span3">{{item.name}}</span>
          <span class="span4">{{item.email}}</span>
          <div class="span5" v-for="(item1,index1) in switcharr" :key="index1" v-show="index==index1">
            <i-Switch size="large" v-model="switcharr[index1]" @on-change="getuserforbidden(item.id)">
              <span slot="open">启用</span>
              <span slot="close">禁用</span>
            </i-Switch>
          </div>
          <span class="span6">{{item.updated_at}}</span>
          <span class="span7" @click="getedit(item.id,item.name,item.email)">编辑</span>
        </div>
        <div v-show="length1==0">
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div class="block">
          <el-pagination :current-page.sync="currentPage1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" @next-click="nextclick" @prev-click="prevclick" :page-sizes="[10, 20, 50,100]" :page-size="pagesize" layout="total,prev, pager, next,sizes" :total="total">
          </el-pagination>
        </div>
        <div class="card" v-if="density">
          <el-card class="box-card">
            <div style="margin-top:-20px;margin-bottom:-20px;">
              <p class="p1" :class="show==index4?'p2':''" v-for="(item4,index4) in list" :key="index4" @click="getshow(index4)">{{item4.name}}</p>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <el-dialog width="35%" title="添加用户" :visible.sync="dialogTableVisible">
      <div style="border-top:1px solid #f5f5f5">
        <div style="margin-top:20px;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item :required="true" style="margin-left:-60px;" label="姓名">
            </el-form-item>
            <div style="margin-top:-40px;margin-left: -100px;">
              <el-form-item prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </div>
            <el-form-item :required="true" style="margin-left:-60px;" label="邮箱">
            </el-form-item>
            <div style="margin-top:-100px;margin-left: -100px;">
              <el-form-item prop="email">
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
            </div>
            <el-form-item :required="true" style="margin-left:-60px;" label="密码">
            </el-form-item>
            <div style="margin-top:-100px;margin-left: -100px;">
              <el-form-item prop="password">
                <el-input v-model="ruleForm.password"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog @close="close" width="35%" title="编辑用户" :visible.sync="dialogTableVisible2">
      <el-skeleton :loading="loading" animated>
        <template slot="template">
          <el-skeleton-item style="height:20px;margin-bottom: 10px;width: 30%;">
          </el-skeleton-item>
          <el-skeleton-item style="height:20px;margin-bottom: 30px;">
          </el-skeleton-item>
          <el-skeleton-item style="height:20px;margin-bottom: 10px;width: 30%;">
          </el-skeleton-item>
          <el-skeleton-item style="height:20px;margin-bottom: 20px;">
          </el-skeleton-item>
          <el-skeleton-item style="height:20px;margin-bottom: 10px;width: 30%;">
          </el-skeleton-item>
        </template>
      </el-skeleton>
      <div style="border-top:1px solid #f5f5f5" v-if="!loading">
        <div style="margin-top:20px;">
          <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <el-form-item :required="true" style="margin-left:-60px;" label="姓名">
            </el-form-item>
            <div style="margin-top:-40px;margin-left: -100px;">
              <el-form-item prop="name">
                <el-input v-model="ruleForm2.name"></el-input>
              </el-form-item>
            </div>
            <el-form-item :required="true" style="margin-left:-60px;" label="邮箱">
            </el-form-item>
            <div style="margin-top:-40px;margin-left: -100px;">
              <el-form-item prop="email">
                <el-input v-model="ruleForm2.email"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div>
          <el-button type="primary" @click="submitForm2('ruleForm2')">提交</el-button>
          <el-button @click="resetForm2('ruleForm2')">重置</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus.js'
export default {
  name: 'usermanagement',
  data() {
    return {
      density: false,
      show: 1,
      list: [{ name: '默认' }, { name: '中等' }, { name: '紧凑' }],
      length1: '',
      id: '',
      loading: true,
      name: '',
      mailbox: '',
      forbidden: true,
      switch1: true,
      current: 1,
      switcharr: [],
      total: 0,
      currentPage1: 1,
      pagesize: 10,
      dialogTableVisible: false,
      dialogTableVisible2: false,
      ruleForm: {
        name: '',
        email: '',
        password: ''
      },
      ruleForm2: {
        name: '',
        email: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
          { min: 1, message: '请输入姓名', trigger: ['blur', 'change'] }
        ],
        email: [
          { required: true, message: '邮箱格式不正确', trigger: ['blur', 'change'] },
          { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '密码最少六位', trigger: ['blur', 'change'] },
          { min: 6, message: '密码最少六位', trigger: ['blur', 'change'] }
        ]
      },
      rules2: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
          { min: 1, message: '请输入姓名', trigger: ['blur', 'change'] }
        ],
        email: [
          { required: true, message: '邮箱格式不正确', trigger: ['blur', 'change'] },
          { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      userlist: state => state.user.userlist.data,
      pagination1: state => state.user.userlist.meta.pagination
    })
  },
  mounted() {
    //一开始加载路由就传送相应的值给leftmenu页面
    Bus.$emit('show', 2)
    Bus.$emit('name', this.$route.meta.name)
    this.getUserList()
  },
  methods: {
    getbody() {
      // this.density = false
    },
    getdensity() {
      this.density = !this.density
    },
    getshow(e) {
      this.show = e
      this.density = false
      if (e == 0) {
        for (let i = 0; i < this.userlist.length; i++) {
          this.$refs.density[i].style.padding = '12px'
        }
      } else if (e == 1) {
        for (let i = 0; i < this.userlist.length; i++) {
          this.$refs.density[i].style.padding = '10px'
        }
      } else if (e == 2) {
        for (let i = 0; i < this.userlist.length; i++) {
          this.$refs.density[i].style.padding = '6px'
        }
      }
    },
    //刷新
    renovate() {
      this.getUserList()
    },
    //编辑按钮
    getedit(id, name, email) {
      this.dialogTableVisible2 = true
      this.ruleForm2.name = name
      this.ruleForm2.email = email
      this.id = id
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    close() {
      this.loading = true
    },
    //编辑用户提交按钮
    submitForm2(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.dispatch('getUpdateuserinformation', { users: this.id, name: this.ruleForm2.name, email: this.ruleForm2.email })
          setTimeout(() => {
            this.dialogTableVisible2 = false
          }, 500)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //编辑用户重置按钮
    resetForm2(formName) {
      this.$refs[formName].resetFields()
    },
    //添加用户提交按钮
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.dispatch('getAdduser', { name: this.ruleForm.name, email: this.ruleForm.email, password: this.ruleForm.password })
          setTimeout(() => {
            this.dialogTableVisible = false
          }, 500)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //添加用户重置按钮
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //新建按钮
    adduser() {
      this.dialogTableVisible = true
    },
    //用户点击下一页按钮改变当前页后触发
    nextclick() {
      console.log('下')
      this.current++
      this.$store.dispatch('getUserList', { current: this.current })
    },
    //用户点击上一页按钮改变当前页后触发
    prevclick() {
      console.log('上')
      this.current--
      this.$store.dispatch('getUserList', { current: this.current })
    },
    //pageSize 改变时会触发
    handleSizeChange1(val) {
      this.$store.dispatch('getUserList', { current: this.current, pageSize: val })
    },
    //currentPage 改变时会触发
    handleCurrentChange1(val) {
      this.$store.dispatch('getUserList', { current: val })
    },
    getUserList() {
      this.$store.dispatch('getUserList', { current: this.current })
    },
    //启动与禁用按钮
    getuserforbidden(e) {
      console.log(e)
      this.$store.dispatch('getuserforbidden', { user: e })
    },
    //重置按钮
    getreset() {
      this.mailbox = ''
      this.name = ''
      this.getUserList()
    },
    //查询按钮
    getenquireabout() {
      this.$store.dispatch('getUserList', { current: this.current, name: this.name, email: this.mailbox })
    }
  },
  watch: {
    userlist: {
      handler(v, o) {
        this.length1 = v.length
        this.switcharr = v.map(val => {
          if (val.is_locked == 1) {
            return false
          } else {
            return true
          }
        })
      }
    },
    pagination1: {
      handler(v, o) {
        this.total = v.total
      }
    }
  }
}
</script>

<style lang="less" scoped>
.usermanagement {
  padding-top: 25px;
  padding-left: 25px;
  padding-right: 25px;

  .enquireabout {
    display: flex;
    background-color: #fff;
    align-items: center;
    padding: 10px;
  }
  .Userlist {
    margin-top: 20px;
    background-color: #fff;
    .yhulieb {
      padding: 20px;
      .cuoz {
        float: right;
        display: flex;
        align-items: center;
        .xinjian {
          background-color: #1890ff;
          border-radius: 5px;
          font-size: 15px;
          padding: 5px 10px;
          color: #fff;
        }
        .xinjian:hover {
          cursor: pointer;
          background-color: #0a88fe;
        }
        .span1 {
          font-size: 25px;
          margin-left: 15px;
        }
        .span1:hover {
          cursor: pointer;
          color: #0a88fe;
        }
        .span2 {
          font-size: 20px;
          margin-left: 15px;
        }
        .span2:hover {
          cursor: pointer;
          color: #0a88fe;
        }
        .span3 {
          font-size: 25px;
          margin-left: 15px;
        }
        .span3:hover {
          cursor: pointer;
          color: #0a88fe;
        }
      }
    }
    .main {
      position: relative;
      padding-left: 20px;
      padding-right: 20px;
      background-color: #fff;
      .Headinformation {
        background-color: #f5f5f5;
        display: flex;
        padding: 10px 5px;
        font-size: 15px;
        border-bottom: 1px solid #dedddd;
      }
      .userinfo {
        padding: 10px 5px;
        border-bottom: 1px solid #dedddd;
        font-size: 14px;
        display: flex;
        .img {
          flex: 1;
          img {
            width: 30px;
            height: 30px;
            border-radius: 25px;
          }
        }

        .span3 {
          flex: 1;
        }
        .span4 {
          flex: 2;
        }
        .span5 {
          flex: 1;
        }
        .span6 {
          flex: 2;
        }
        .span7 {
          flex: 1;
          color: #0a88fe;
          opacity: 0.7;
        }
        .span7:hover {
          cursor: pointer;
          color: #0384fd;
          opacity: 1;
        }
      }
      .block {
        height: 50px;
        margin-top: 20px;
        float: right;
      }
      .card {
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;

        .box-card {
          .p1 {
            margin-left: -20px;
            margin-right: -20px;
            padding: 5px;
          }
          .p1:hover {
            cursor: pointer;
            background-color: #f5f5f5;
          }
          .p2 {
            background-color: #ddedfc;
            color: #6fb4f5;
          }
        }
      }
    }
  }
}
</style>